<template>
  <div class="app-container">
    <div class="timeTerminal">
      <div class="" style="display: flex; justify-content: space-between; align-items: flex-end">
        <div class="title">
          <span class="bar"></span>
          <span class="text">时段交易汇总</span>
        </div>
        <div>
          <el-button type="primary" icon="Download">导出</el-button>
        </div>
      </div>
      <el-divider />
      <el-form ref="queryRef" :inline="true" label-width="100px">
        <div>
          <el-form-item label="日期: ">
            <el-radio-group label="size control">
              <el-radio-button label="large">近7天</el-radio-button>
              <el-radio-button label="large">近15天</el-radio-button>
              <el-radio-button label="default">近30天</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-date-picker end-placeholder="结束日期" range-separator="-" start-placeholder="开始日期" type="daterange" value-format="YYYY-MM-DD" />
          </el-form-item>
        </div>

        <el-form-item label="合作伙伴号" prop="payStatus">
          <el-select v-model="value" class="m-2" placeholder="请选择" size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Document">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="merchant_1">
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">交易总金额(元)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(79, 201, 176)">0.00</div>
        </div>
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">交易总笔数(笔)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(123, 201, 249)">0.00</div>
        </div>
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">笔均金额(元)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(123, 201, 249)">0.00</div>
        </div>
        <div class="merchant_2">
          <div class="merchant_3">交易总手续费(元)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(79, 201, 176)">0.00</div>
        </div>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="日汇总" name="first"></el-tab-pane>
        <el-tab-pane label="周汇总" name="second"></el-tab-pane>
        <el-tab-pane label="月汇总" name="third"></el-tab-pane>
        <el-tab-pane label="季度汇总" name="fourth"></el-tab-pane>
        <el-tab-pane label="年汇总" name="fivth"></el-tab-pane>
      </el-tabs>

      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="date" label="序号" width="180"> </el-table-column>
        <el-table-column prop="address" label="日期" width="180"> </el-table-column>
        <el-table-column label="金额" width="120" prop="money">
          <template #default>
            <span style="color: #ff6600">￥500</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="笔数"> </el-table-column>
        <el-table-column prop="money" label="手续费">
          <template #default>
            <span style="color: #ff6600">￥500</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          background
          :page-sizes="[5, 10, 20, 50]"
          :small="small"
          :disabled="disabled"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import type { TabsPaneContext } from 'element-plus';
  import { ref } from 'vue';

  const value = ref('');

  const activeName = ref('first');

  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event);
  };
  const options = [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
    },
  ];
  const currentPage4 = ref(4);
  const pageSize4 = ref(5);
  const small = ref(false);
  const disabled = ref(false);
  const tableData = [
    {
      date: '1',
      name: '3',
      address: '2022-11-17',
      money: '￥500.00',
    },
    {
      date: '2',
      name: '2',
      address: '2022-11-17',
      money: '￥500.00',
    },
    {
      date: '3',
      name: '1',
      address: '2022-11-17',
      money: '￥500.00',
    },
    {
      date: '4',
      name: '1',
      address: '2022-11-17',
      money: '￥500.00',
    },
  ];
  const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
  };
  const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
  };
</script>

<style scoped lang="scss">
  .timeTerminal {
    margin: 10px;

    .title {
      display: flex;
      align-items: center;
      padding-top: 16px;
      padding-left: 16px;

      .bar {
        width: 4px;
        height: 20px;
        background-color: #409eff;
        margin-right: 10px;
      }

      .text {
        font-size: 16px;
        color: #333;
      }
    }

    .merchant_1 {
      width: 100%;
      height: 110px;
      background: beige;
      border-bottom: 1px dashed #ddd;
      margin: 10px 0;
      border-top: 1px dashed #ddd;
      background: #fafafa;
      display: flex;

      .merchant_2 {
        flex: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        margin: 10px 0;
      }

      .merchant_3 {
        display: block;
        height: 30px;
        margin-bottom: 5px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #666;
      }
    }

    .demo-pagination-block {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }
  }
</style>
